<template>
  <div class="Login">
    <!--flex弹性盒子模型，justify-content：主抽 -->
    <div style="display: flex;justify-content: center;height: 700px">
      <el-card style="width: 400px;height: 250px  ; margin-top: 30px;">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
              <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  //单页面中不支持前面的data:{}方式
  data() {
    //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
    return {
      username: "",
      password: "",
    }
  },
  methods: {
    doLogin() {//一点击登录按钮，这个方法就会执行
      this.axios.get("back/user/login", {
        params: {
          username: this.username,
          pwd: this.password,
        }
      }).then(
          r => {
            if (r.data.info == 0) {
                this.$store.state.user = r.data.user;
              this.$router.push("/index")
            } else if (r.data.info == 1) {
              this.$message({
                message: '用户名或者密码错误',
                type: 'error',
                duration: 1000
              });
            }
          }
      )
    }
  }
}
</script>


<style scoped>
div{
height: 100%;
  width: 100%;
}
.Login {
  background: url("../image/login.jpg");
  background-size: 100% auto;
}
</style>
